<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../static/css/city-picker.css" th:href="@{/css/city-picker.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link href="../static/lib/bootstrap/css/bootstrap.min.css" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=d999180714cf9106f478b3715bd3bbad&plugin=AMap.Geocoder"></script>

</head>
<body>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" th:fragment="menu(n)">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">朝夕会</h2>
            <a href="/" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="/end" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="history icon"></i>往期活动</a>
            <a href="/suggest" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="info icon"></i>意见箱</a>
            <a href="#" class="m-item item m-mobile-hide" th:href="@{/user/apply}" th:classappend="${n==4} ? 'active'"><i class="edit outline icon"></i>申请成为负责人</a>
            <a class="m-item item m-mobile-hide" onclick="get_place()" th:if="${session.p}==null"><i
                    class="marker alternate icon"></i>定位</a>
            <div class="ui dropdown item" th:if="${session.p}!=null">
                <a class="m-item item m-mobile-hide" onclick="get_place()" th:text="${session.p}"
                ><i class="marker alternate icon"></i>定位</a>
                <div class="menu">
                    <a href="#" onclick="get_place()" class="item">重新定位</a>
                </div>
            </div>


            <div class="right m-item item m-mobile-hide">
                <div class="text" th:if="${session.user}==null">
                    <a href="#" style="color:#fff;" th:href="@{/login}">
                        <img class="ui avatar image" src="../static/images/avatar.png" th:src="@{/images/avatar.png}">请登录
                    </a>
                </div>

                <div class="text" th:if="${session.user}!=null">
                    <div class="ui dropdown item">
                        <a href="#"><img class="ui avatar image" src="../static/images/avatar.png"
                                         th:src="@{/images/avatar.png}"></a>
                        <a href="#" style="color:#fff;" th:text="${session.user.name}">你好</a>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" th:href="@{/user/info}" class="item">个人信息</a>
                            <a href="#" th:href="@{/user/activity}" class="item">我的活动</a>
                            <a data-toggle="tooltip" data-placement="top" title="网站暂无此功能" class="item">我的评论</a>
                            <a href="#" th:href="@{/user/logout}" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<th:block th:fragment="script">
<script src="../static/js/jquery.js" th:href="@{/js/jquery.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<script>
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    function get_place() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    var place = "";

    function showPosition(position) {
        place = position.coords.longitude + "," + position.coords.latitude;
        checkCode(2);
    }

    function checkCode(time) {
        if (time === 0) {
            $.ajax({
                url: "/get_place",
                type: "get",
                dataType: "json",
                data: {"place": place},
                success: function (result) {
                    if (result.code === 200) {
                        location.reload();
                    }
                }
            })
        } else {
            time--;
            setTimeout(function () {
                checkCode(time);
            }, 1000);
        }
    }

</script>
</th:block>

</body>
</html>